<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        .title {
            line-height: 40px;
            height: 40px;
            text-indent: 10px;
        }

        .list li {
            text-indent: 10px;
            line-height: 40px;
            height: 40px;
            border: 1px solid #333;
        }

        .first {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <h3 class="title">jquery获取元素</h3>
        <ul class="list">
            <li class="first"><span class="demo">01</span></li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </ul>
        <input type="text" class="search">
    </div>
</body>
<script>

    // first()   返回匹配元素中第一个
    // last()    返回匹配元素中最后一个
    // console.log($(".list li").first());
    // console.log($(".list li").last());

</script>
<script>
    // 层级查找 (父元素 子元素 同级元素)

    // 父元素
    // parent()  返回匹配的父元素(jquery对象)
    // console.log($(".demo").parent());
    // console.log($(".demo").parent().parent());
    // console.log($(".demo").parent().parent().parent());


    // parents() 返回匹配的父代元素的集合
    // parents(selector|DOM|DOMList|jquery对象)  方法可以接收一个选择器作为筛选条件
    // console.log($(".demo").parents());
    // console.log($(".demo").parents(".first"));
    // console.log($(".demo").parents(".first,.list"));

    // parentsUntil()  返回匹配的父代元素的集合,直到遇到某个元素为止

    // closest()  自目标元素开始,依次向上层查找 => 知道找到最近的一个满足条件的元素
    // console.log($(".demo").closest("span"));
    // console.log($(".demo").closest(".first"));


    // children() 返回匹配元素的子元素的集合
    // children(selector|DOM|DOMList|jquery对象)  方法可以接收一个选择器作为筛选条件
    // console.log($(".list").children());
    // console.log($(".list").children(".first"));


    // prev()   返回匹配元素的前一个同级元素
    // prevAll()  返回匹配元素的前所有的同级元素,可以接收一个选择器作为筛选条件
    // prevUntil()  返回匹配元素的前所有的同级元素,直到遇到某个元素为止

    // console.log($(".last").prev());
    // console.log($(".last").prev().prev());

    // console.log($(".last").prevAll().css({ background: "red" }));
    console.log($(".last").prevUntil(".first").css({ background: "red" }));


    // next()   返回匹配元素的后一个同级元素
    // nextAll()  返回匹配元素的后所有的同级元素,可以接收一个选择器作为筛选条件
    // nextUntil()  返回匹配元素的后所有的同级元素,知道遇到某个元素为止
























</script>

</html>